<template>
  <div class="index clearafter">
    <module-head></module-head>
    <div class="content flex">
      <div class="w220">
        <menu-list></menu-list>
      </div>
      <div class="w980 flex_full">
        <p class="flex flex_vcenter pdb20">
          <i class="titleTag"></i>
          <span class="fRedBig">随访规则编辑</span>
        </p>
        <div class="whiteBg">
          <div class="flex">
            <form class="form-inline">
              <div class="form-group">
                <label for="exampleInputName1">随访标题</label>
                <input type="text" class="form-control" id="exampleInputName1" v-model="sfTitle">
              </div>
              <div class="form-group ml20">
                <label for="exampleInputEmai2">随访大类</label>
                <select class="form-control" v-model="searchSfType" id="exampleInputEmai2">
                  <option v-for="item in sfType" :value="item.value">{{item.text}}</option>
                </select>
              </div>
              <div class="form-group ml20 searchBox">
                <label for="exampleInputEmai3">随访科室</label>
                <input type="text" class="form-control" id="exampleInputEmai3" v-model="deptText">
                <ul v-show="searchDeptList.length != 0">
                  <li v-for="item in searchDeptList" @click="selSearchDept(item)">{{item.deptName}}</li>
                </ul>
              </div>
            </form>
            <div class="ml20 flex">
              <button class="yellowBtn" @click="search()">查询</button>
              <button class="yellowBtn ml20" @click="openAddModal()">新增</button>
            </div>
          </div>

          <div class="mt20"></div>
          <table class="table table-striped table-hover">
            <thead>
            <tr>
              <th>随访标题</th>
              <th>随访大类</th>
              <th>随访科室</th>
              <th>主诊断</th>
              <th>患者类型</th>
              <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="item in ruleList">
              <td>{{item.SFBT}}</td>
              <td>{{item.SFZL | SFZL}}</td>
              <td>
                <span v-if="item.GLKS != 0">{{item.KSMC}}</span>
                <span v-else>全院</span>
              </td>
              <td></td>
              <td>{{item.HZLX}}</td>
              <td>
                <span title="编辑" @click="toEdit(item)">
                  <img src="../../assets/img/jsszy/编辑1.png" alt="" class="xicon">
                </span>
                <span title="启用" @click="startRule(item)" v-show="item.GZZT == 0" class="pl10">
                  <img src="../../assets/img/jsszy/CheckboxON.png" alt="" class="xicon">
                </span>
                <span @click="openDeleteBox(item)" title="删除" class="pl10">
                  <img src="../../assets/img/jsszy/移除.png" alt="" class="xicon">
                </span>
              </td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div class="modal fade" tabindex="-1" role="dialog" id="newRuleModal">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">新增随访规则</h4>
          </div>
          <div class="modal-body">
            <ul class="formList">
              <li>
                <label>随访标题</label>
                <input type="text" class="form-control" v-model="addSfTitle">
              </li>
              <li>
                <label>随访大类</label>
                <select class="form-control" v-model="addSfType">
                  <option v-for="item in sfType" :value="item.value">{{item.text}}</option>
                </select>
              </li>
              <li class="searchBox">
                <label>随访科室</label>
                <input type="text" class="form-control" v-model="addDeptText">
                <ul v-show="addSearchDeptList.length != 0">
                  <li v-for="item in addSearchDeptList" @click="selAddSearchDept(item)">{{item.deptName}}</li>
                </ul>
              </li>
              <li><span style="color:red">* 默认为‘全院’</span></li>
              <li>
                <label>部门类型</label>
                <select class="form-control" v-model="addDeptType">
                  <option value="1">科室</option>
                  <option value="2">随访中心</option>
                </select>
              </li>
              <li>
                <label>开始类型</label>
                <select class="form-control" v-model="addBeginType">
                  <option value="3">就诊日期</option>
                  <option value="4">特定日期</option>
                </select>
              </li>
              <li>
                <label>起始时间</label>
                <input type="text" placeholder="请选择开始日期" class="form-control" id="startdate" v-model="startDate" />
              </li>
              <li>
                <label>患者类型</label>
                <input type="text" class="form-control" v-model="addIllType">
              </li>
            </ul>
          </div>
          <div class="modal-footer">
            <button class="longBtn center-block" @click="addRule()">保存</button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <div class="modal fade" tabindex="-1" role="dialog" id="confirmDelete">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">确认信息</h4>
          </div>
          <div class="modal-body">
            <p>确认删除此条随访规则吗？</p>
          </div>
          <div class="modal-footer flex flex_end">
            <button class="btn btn-default" @click="deleteRule()">确认</button>
            <button class="btn btn-danger" data-dismiss="modal">取消</button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
  </div>
</template>

<script>
  import Public from 'assets/public.js'
  import 'assets/lib/laydate/laydate.js'
  import 'assets/lib/laydate/need/laydate.css'
  import 'assets/lib/laydate/skins/danlan/laydate.css'
  import moduleHead from 'components/module-head'
  import menuList from 'components/menu-list'
  import 'assets/lib/bootstrap-3.3.2/js/bootstrap.min.js'

  export default {
    data () {
      return {
        ruleList: [],
        sfTitle: '',
        addSfTitle: '',
        editSfTitle: '',
        deptText: '',
        addDeptText: '',
        editDeptText: '',
        addDeptType: '',
        sfType: [
          {text:'慢病随访',value:1},
//          {text:'出院普通随访',value:2},
          {text:'门诊普通随访',value:3}
        ],
        searchSfType: '',
        addSfType: '',
        editSfType: '',
        addIllType: '',
        addBeginType: '',
        searchDeptList: [],
        addSearchDeptList: [],
        editSearchDeptList: [],
        selSearchDeptName: {},
        addSearchDeptName: {},
        editSearchDeptName: {},
        userSelEvent: false,
        addUserSelEvent: false,
        editUserSelEvent: false,
        deleteWhich: {},
        startDate: ''
      }
    },
    components: {
      moduleHead, menuList
    },
    ready () {
      console.log(Public.sfBaseUrl)
      this.queryRuleList('', 0, 0)
      var self = this
      laydate({
        elem: '#startdate',
        choose: function(datas) { //选择日期完毕的回调
          self.startDate = datas + ' 10:00:00'
        }
      });
    },
    filters: {
      'SFZL' (val) {
        if (val == 1) {
          return '慢病随访'
        } else if (val == 2) {
          return '出院普通随访'
        }else if (val == 3) {
          return '门诊普通随访'
        }
      }
    },
    watch: {
      'deptText' (val, oldval) {
        if (this.userSelEvent == false) {
          this.queryDept('search')
        } else {
          this.userSelEvent = false
        }
      },
      'addDeptText' (val, oldval) {
        if (this.addUserSelEvent == false) {
          this.queryDept('add')
        } else {
          this.addUserSelEvent = false
        }
      },
      'editDeptText' (val, oldval) {
        if (this.editUserSelEvent == false) {
          this.queryDept('edit')
        } else {
          this.editUserSelEvent = false
        }
      },

    },
    methods: {
      queryRuleList (SFBT, SFZL, SFKS) {
        var self = this
        $.ajax({
          type:"POST",
          url:Public.sfBaseUrl+"/NIS/cas/mobile/evaluation/v56_update1/get/rule",
          data:{
            SFBT: SFBT,
            SFZL: SFZL,
            SFKS: SFKS,
            token: sessionStorage.getItem('sfToken')
          },
          success:function(res){
            if (res.Data) {
              self.ruleList = res.Data
            }
          }
        })
      },
      queryDept (handler) {
        var self = this
        var param = ''
        if (handler == 'search' && this.deptText.length == 0) {
          return
        }
        if (handler == 'add' && this.addDeptText.length == 0) {
          return
        }
        if (handler == 'edit' && this.editDeptText.length == 0) {
          return
        }
        if (handler == 'search') {
          param = this.deptText
        } else if (handler == 'add') {
          param = this.addDeptText
        }else if (handler == 'edit') {
          param = this.editDeptText
        }
        $.when(Public.commonajaxSf("cas.doctorCerfService", "findDeptlike", JSON.stringify(['0ab18621-cc00-4c4a-9b35-4ff28a7d9bcc', param])))
          .done(function(res) {
            if (res.code == 200) {
              if (handler == 'search') {
                self.searchDeptList = res.body
              } else if (handler == 'add') {
                self.addSearchDeptList = res.body
              }else if (handler == 'edit') {
                self.editSearchDeptList = res.body
              }
            }
          })
      },
      openAddModal () {
        $('#newRuleModal').modal('show')
      },
      selSearchDept (item) {
        this.selSearchDeptName = item
        this.searchDeptList = []
        this.deptText = item.deptName
        this.userSelEvent = true
      },
      selAddSearchDept (item) {
        this.addSearchDeptName = item
        this.addSearchDeptList = []
        this.addDeptText = item.deptName
        this.addUserSelEvent = true
      },
      addRule () {
        var self = this
        if (this.addSfType == 3 && (this.addBeginType == 1 || this.addBeginType == 2)) {
          Public.ajaxPrompt('您选择的随访大类与开始类型不匹配')
          return
        }
        if (this.addSfType == 2 && this.addBeginType == 3) {
          Public.ajaxPrompt('您选择的随访大类与开始类型不匹配')
          return
        }
        var postdata={
          GZID: 0,
          SFBT: self.addSfTitle,
          SFZL: self.addSfType,
          GLKS: self.addSearchDeptName.localDeptId || 0,
          HZLX: self.addIllType,
          BMLX: self.addDeptType,
          QSLX: self.addBeginType,
          QSSJ: new Date(self.startDate)
        }
        $.ajax({
          type:"POST",
          url:Public.sfBaseUrl+"/NIS/cas/mobile/evaluation/v56_update1/commit/rule",
          headers: {
            "token": sessionStorage.getItem('sfToken')
          },
          contentType: 'application/json',
          data:JSON.stringify(postdata),
          beforeSend: function (req) {
            req.setRequestHeader("Accept", "application/json");
          },
          success:function(res){
            if (res.Data) {
              Public.ajaxPrompt("保存成功")
              $('#newRuleModal').modal('hide')
              self.queryRuleList('', 0, 0)
            } else {

            }
          }
        })
      },
      openDeleteBox (item) {
        this.deleteWhich = item
        $('#confirmDelete').modal('show')
      },
      deleteRule () {
        var self = this
        $.ajax({
          type:"POST",
          url:Public.sfBaseUrl+"/NIS/cas/mobile/evaluation/v56_update1/delete/rule",
          headers: {
            "token": sessionStorage.getItem('sfToken')
          },
          data:{
            GZID: self.deleteWhich.GZID.toString()
          },
          success:function(res){
            if (res.Data) {
              Public.ajaxPrompt("已删除")
              self.queryRuleList('', 0, 0)
              $('#confirmDelete').modal('hide')
            }
          }
        })
      },
      search () {
        this.queryRuleList(this.sfTitle || '', this.searchSfType || 0, this.selSearchDeptName.localDeptId || 0)
      },
      startRule (item) {
        var self = this
        $.ajax({
          type:"POST",
          url:Public.sfBaseUrl+"/NIS/cas/mobile/evaluation/v56_update1/start/rule",
          headers: {
            "token": sessionStorage.getItem('sfToken')
          },
          data:{
            GZID: item.GZID.toString()
          },
          success:function(res){
            if (res.Data) {
              Public.ajaxPrompt("已启用")
              self.queryRuleList('', 0, 0)
            }
          }
        })
      },
      toEdit (urlParam) {
        window.location.href="detailDesign.html?param="+encodeURIComponent(JSON.stringify(urlParam))
      }
    }
  }
</script>

<style scoped>
  @import '../../assets/reset.css';
  @import '../../assets/flex.css';
  @import '../../assets/lib/bootstrap-3.3.2/css/bootstrap.min.css';
  .formList>li{
    display:flex;
    -webkit-display:flex;
    padding:10px;
  }
  .formList>li>label{
    width:80px;
  }
  .searchBox{
    position:relative;
  }
  .searchBox>ul{
    position:absolute;
    top:37px;
    width:196px;
    right:0;
    max-height: 150px;
    overflow: auto;
    background-color: white;
    border-right: 5px;
    border: 1px solid #FAEEE9;
  }
  .searchBox>ul>li{
    cursor: pointer;
    padding:5px 0 5px 10px;
  }
  .searchBox>ul>li:hover{
    background-color: #FAEEE9;
  }
</style>
